<template>
    <div id="index" ref="appRef">
        <div class="bg1">
          <p class="p1">智慧数据停车大屏展示系统</p>
            <el-row :gutter="20" style="margin-left: 200px;padding: 150px">
                <el-col :span="7">
                    <div class="grid-content bg-purple">
                        <el-card class="card1" :body-style="{padding: '5px'}"  @click="toHome1">
                            <img src="../src/assets/1.png" class="image" @click="toHome1" >
                            <div style="padding: 14px;">
                                <span class="span">{{ title[0] }}</span>
                                <div class="bottom">
                                    <!--                            <time class="time">{{ currentDate }}</time>-->
                                    <!--                        <el-button type="text" class="button" @click="toHome2">点击按钮</el-button>-->
                                </div>
                            </div>
                        </el-card>
                    </div>
                </el-col>
              <el-col :span="7">
                <div class="grid-content bg-purple">
                  <el-card class="card1" :body-style="{padding: '5px'}"  @click="toHome2">
                    <img src="../src/assets/1.png" class="image" @click="toHome2" >
                    <div style="padding: 14px;">
                      <span class="span">{{ title[1] }}</span>
                      <div class="bottom">
                        <!--                            <time class="time">{{ currentDate }}</time>-->
<!--                        <el-button type="text" class="button" @click="toHome2">点击按钮</el-button>-->
                      </div>
                    </div>
                  </el-card>
               </div>
              </el-col>
              <el-col :span="7"><div class="grid-content bg-purple">
                <el-card :body-style="{ padding: '5px' }"  @click="toHome3">
                  <img src="../src/assets/2.png" class="image" @click="toHome3">
                  <div style="padding: 14px;">
                    <span  class="span">{{ title[2] }}</span>
                    <div class="bottom">
<!--                      <el-button type="text" class="button" @click="toHome3">点击按钮</el-button>-->
                    </div>
                  </div>
                </el-card>
              </div></el-col>

            </el-row>

<!--            <el-row style="margin-left: 500px;padding: 150px">-->
<!--              <div class="card1">-->

<!--              </div>-->


<!--            </el-row>-->
            <!--      <dv-loading v-if="loading">Loading...</dv-loading>-->

        </div>
    </div>
</template>

<script type="module">
    import { useRoute, useRouter } from 'vue-router'
    export var url
    export var titles
    export default{

        name: "main",
        data() {

            return {
                imageurl:['三明市智慧停车系统','融云智慧停车系统'],
                title:['城市引擎智慧停车系统','三明市智慧停车系统','融云智慧停车系统'],
                currentDate: new Date()
            };
        },
        setup () {
            const router = useRouter()
            const toHome1 = (() => {
                router.push({
                    name: 'Index',
                    params:{ url:'http://39.103.220.194/lt/',titles:'城市引擎智慧停车系统'},

                })
            })
            const toHome2 = (() => {
                router.push({
                    name: 'Index',
                    params:{ url:'http://muse.cheboyi.com/lt/',titles:'三明市智慧停车系统'},

                })
            })
            const toHome3 = (() => {

                router.push({
                    name: 'Index',
                    params:{url:'http://park.fjrcloud.com/lt/',titles:'融云智慧停车系统'}
                })
            })
            return {
                toHome2,toHome3,toHome1
            }
        },

    }
</script>

<style scoped>
    .bg1{
        height: 10800px;
        background-image: url('../src/assets/pageBg.png');
    }
    .image{
      width: 100%;
    }
    .p1{
      /*background: #2B6695;*/
      /*border-radius: 6px 6px 6px 6px;*/
      /*box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);*/
      color: #3079d4;
      font-family:"微软雅黑", "宋体", "黑体", Arial;
      font-size: 38px;
      font-weight: bold;
      height: 25px;
      line-height: 25px;
      margin: 0px 0 !important;
      padding: 88px 0 5px 5px;
      text-shadow: 2px 2px 3px #222222;
      text-align: center;
    }
    .el-card /deep/ {
      background: #0f1325;
      color: black;
    }
    .span{
      color: #f1f1f1;
      font-size: 20px;
    }
</style>
